import { Menu } from 'antd'
import Logo from '../../assets/logo.png'
import './index.scss'
import { useSelector } from 'react-redux'
import { useLocation, useNavigate } from 'react-router-dom'

export default function MyMenu() {
  const navigate = useNavigate()
  const location = useLocation()
  const { menuList } = useSelector((state: any) => state.authSlice)

  const handleClick = ({ key }: { key: string }) => {
    navigate(key)
  }

  return (
    <div>
      <div className="logo">
        <img src={Logo} width={18} />
        <h1>智慧园区管理平台</h1>
      </div>
      <Menu
        defaultSelectedKeys={['/dashboard']}
        mode="inline"
        theme="dark"
        items={menuList}
        onClick={handleClick}
        selectedKeys={[location.pathname]}
      />
    </div>
  )
}
